<template>
<!--  <div>-->
<!--    <el-menu-->
<!--        default-active="2"-->
<!--        class="el-menu-vertical-demo"-->
<!--        @open="handleOpen"-->
<!--        @close="handleClose"-->
<!--    >-->
<!--      <el-sub-menu index="1">-->
<!--        <template #title>-->
<!--          <el-icon><location /></el-icon>-->
<!--          <span>Navigator One</span>-->
<!--        </template>-->
<!--      </el-sub-menu>-->
<!--    </el-menu>-->
<!--  </div>-->
  <div class="bg">
    <Top></Top>
    <div class="entity-item">
      <div class="userInfo">
        <div class="userImage">
          <div>
<!--              :on-exceed="handleExceed"-->
<!--             :on-change="imageChanged"-->
<!--            :before-upload="beforeUpload"-->
            <el-upload
                class="avatar-uploader"
                :http-request="uploadImage"

                ref="uploadRef"
                auto-upload:false

                list-type="picture"

                v-model:file-list="fileList"
                :on-change="beforeUpload"
                multiple:false
            >
              <el-image
                  :src="sysUser.imageUrl"
                  style="width: auto; height: 35vh"
                  :zoom-rate="1.2"
                  lazy />

            </el-upload>

          </div>
          <div>
<!--            @click="uploadUserImage"-->
            <el-button type="primary" size="large" >
              修改图片
            </el-button>
          </div>
        </div>

        <div class="otherInfo">
          <div class="infoItem">
            <el-text size="large" class="tripText">用户名</el-text>
            <el-input v-model="sysUser.username" size="large" disabled="false"></el-input>
          </div>

          <div class="infoItem">
            <el-text size="large" class="tripText">昵称</el-text>
            <el-input v-model="sysUser.nickname" size="large" ></el-input>
          </div>

          <div class="infoItem">
            <el-text size="large" class="tripText">所在地区</el-text>
            <el-input v-model="sysUser.divisionCode" size="large" ></el-input>
          </div>
          <el-button type="primary" size="large">
            提交修改
          </el-button>
        </div>

      </div>

    </div>
  </div>

</template>

<script setup>
import Top from "@/components/Top";
// import { UploadProps } from 'element-plus'
import {getUserInfo} from "@/manager/UserManager"
import {ref} from "vue";
import {onMounted} from 'vue'
onMounted(()=>{
  getUserInfo().then((res)=>{
  sysUser.value  = res;
  })
  // console.log(this.sysUser);
})
const uploadRef = ref();
const sysUser=ref({})
const fileList=ref([])
const uploadImage=()=>{
  console.log(uploadRef.value);
}
const f = async () => {
  let a = await getUserInfo()
  console.log(a);
}
const beforeUpload=(rawFile)=> {
  console.log("111111");
  console.log(rawFile);
  // return new Promise((resolve ) => {
   fileList.value = [];
   fileList.value.push(rawFile);
   f()


  //   resolve()
  // })
}

</script>

<style scoped>

body {
  background-color: #f0f0f0; /* 这里可以设置你想要的颜色 */

}

.bg{
  background-color: rgb(255, 255, 255);

}

.entity-item {
  padding: 40px;

}

.userInfo {
  color: #f0f0f0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.userImage {
  display: flex;
  flex-direction: column;  /* 上下排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px;
}

.userImage > div {
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.otherInfo {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

}

.infoItem {
  display: flex;
  flex-direction: row;
  justify-content: center; /* 水平居中 */
  /*align-items: center; !* 垂直居中 *!*/
  margin-bottom: 5px;
}

.tripText {
  display: flex;
  width: 10vw;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

question-info {
  display: flex;
}

</style>
